<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
    <link rel="stylesheet" href="css/uikit/uikit.css"/>
    <script src="js/common/jquery.min.js"></script>
    <script src="js/common/vue.min.js"></script>
    <script src="js/common/uikit.js"></script>

    <link rel="stylesheet" href="css/main.css"/>
    <script lang="javascript" src="js/utils.js"></script>
    <script lang="javascript" src="../../js/docker.js"></script>
    <style>
        body {
            background-color: #1d8acb;
        }
    </style>
    <script language="JavaScript">
        function init() {
            loginVue = new Vue({
                el: '#login',
                data:{
                    username:"",
                    password:""
                },
                methods:{
                    login : function(){
                        try{
                            var user = checkUser(this.username, this.password);
                            if(user!=null) {
                                location = getHost()+"/index.html"
                                setSessionStorage("User",user)
                            }else{
                                alertError("Login failed. please check you username or password !")
                            }
                        }catch(e){
                            alertError(e)
                        }
                    }
                }
            });
        }
    </script>
</head>
<body onload="init()" >
    <div id="login" class="uk-grid">
        <div class="uk-width-2-5 uk-container-center uk-vertical-align uk-text-center uk-margin-large-bottom">
            <div class="uk-vertical-align-middle" style="width:100%;">
                <div class="uk-panel uk-panel-box uk-grid uk-form uk-form-horizontal uk-text-center">
                    <div class="uk-width-1-1 uk-margin-small-top uk-padding-remove">
                        <img src="img/logo.png" style="margin-bottom: 15px;">
                    </div>
                    <div class="uk-form-row uk-width-1-1 uk-padding-remove">
                        <div class="uk-form-label uk-text-bold uk-text-right uk-padding-remove">
                            <span class="uk-icon-user"></span> User :
                        </div>
                        <div class="uk-form-controls uk-text-left">
                            <input type="text" class="uk-form-width-medium" v-model="username">
                        </div>
                    </div>
                    <div class="uk-form-row uk-width-1-1 uk-padding-remove" style="margin-bottom: 15px;">
                        <div class="uk-form-label uk-text-bold uk-text-right uk-padding-remove">
                            <span class="uk-icon-eye-slash"></span> Password :
                        </div>
                        <div class="uk-form-controls uk-text-left">
                            <input type="password" class="uk-form-width-medium" v-model="password">
                        </div>
                    </div>
                    <div class="uk-width-4-4 uk-margin-small-top uk-padding-remove">
                        <a href="#" class="uk-button uk-button-primary" @click="login()"><span class="icon uk-icon-sign-in"></span>Login</a>
                    </div>
                </div>
            </div>
            <div class="uk-width-6-6 uk-vertical-align-bottom" style="height:30px;">
                <div style=" color:#FFFFFF" class="uk-text-center uk-margin-bottom">
                    <div>Copyright <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
                    <div>Powered by Voovan open source framework.</div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>